<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="wechat"/>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <title>建议反馈</title>
    <style>
    .weui-media_title {
        font-size: 1.2rem !important;
    }

    .weui-media_box .weui-media_desc {
        -webkit-line-clamp: 4;
    }

    .field {
        width: 100%;
    }
    ::-webkit-input-placeholder {
        font-size: 1.2rem;
        color: #ccc;
        font-family: inherit !important;
    }

    ::-moz-placeholder {
        font-size: 1.2rem;
        color: #ccc;
        font-family: inherit  !important;
    }

    :-ms-input-placeholder {
        font-size: 1.2rem;
        color: #ccc;
        font-family: inherit  !important;
    }

    :-moz-placeholder {
        font-size: 1.2rem;
        color: #ccc;
        font-family: inherit;
    }
.weui-textarea,.weui-media_text input{
    font-size: 1.2rem;
     font-family: inherit;
}
.preview{
    width: 77px;
    height: 77px;
}

    </style>
</head>

<body>

<g:form action="wxSuggestSave" name="suggestForm">
    <input type="hidden" value="${this.house.id}" name="id" id="house"/>
    <input type="hidden" value="${this.timestamp}" name="timestamp" id="timestamp"/>
    <input type="hidden" value="${this.nonceStr}" name="nonceStr" id="nonceStr"/>
    <input type="hidden" value="${this.signature}" name="signature" id="signature"/>
    <input type="hidden" value="${this.accessToken}" name="accessToken" id="accessToken"/>
    <input type="hidden" id="evaluateFiles" name="evaluateFiles" value="">
    <input type="hidden" id="fileNames" name="fileNames" value="">

    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__bd">
            <div class="weui-media_box weui-media_text">
                <h4 class="weui-media_title">请填写您的期望押品评估总价(<span class="colorRed">必填</span>)</h4>
                <g:field class="field" type="number" name="appliedTotalPrice" id="appliedTotalPrice" value="${this.house?.appliedTotalPrice}" placeholder="例如：400万"/>
            </div>

            <div class="weui-media_box weui-media_text">
                <h4 class="weui-media_title">请填写您的反馈原因(<span class="colorRed">必填</span>)</h4>
                <g:textArea class="weui-textarea field" type="text" id="reasonOfPriceAdjustment" name="reasonOfPriceAdjustment" rows="4"
                         placeholder="例如：房层带阁楼、附带车库（需提供产证）、是否为学区房、央产房、房改房、是否存在比其他评估机构低的情况等。"
                         value="${this.house?.reasonOfPriceAdjustment}" />
            </div>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__bd weui-cell_primary">
            <div class="weui-uploader">
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader_files" id="fileList">
                    </ul>
                    <div class="weui-uploader_input_wrp">
                        <input type="button" id="pickSerialPic" class="weui-uploader_input" onclick="uploadPropertyImg()">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bigBtn" style="margin-bottom: 20px">
        <input class="linkBtn weui-btn weui-btn_primary" value="提交" id="submitBtn" type="button"/>
    </div>
</g:form>



<div class="client-hotline2">
    <a href="tel:${this.house?.opportunity?.contact?.city?.telephone}" class="hotline">
        <g:img class="hotlineIcon" dir="images" file="hotline-icon.png"/>
        <span class="city-hotline">${this.house?.opportunity?.contact?.city?.telephone}</span>
    </a>
</div>

%{--提示信息和验证--}%
<div class="message-box" style="top: 20%;">
    <div class="helpMsg hide"></div>
    <g:if test="${flash.message}">
        <div class="message" role="status">
            ${flash.message}
        </div>
    </g:if>
</div>
<script>
        var timestamp = $("#timestamp").val();
        var nonceStr = $("#nonceStr").val();
        var signature = $("#signature").val();

        // alert(location.href.split('#')[0])

        // alert(nonceStr);
        // alert(timestamp);
        // alert(signature);

        wx.config({
            debug: false,
            appId: 'wx759dbfa790cfd63b',
            // appId: 'wxe49dcb507643c1cd',
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: [
                  "chooseImage",
                  "previewImage",
                  "uploadImage",
                  "downloadImage"
            ]
        });
        var evaluateFiles = ""
        function uploadPropertyImg() {
            $("#fileList").html("");
            evaluateFiles = ""
            wx.chooseImage({
                count: 9,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    var localIds = res.localIds;
                    for(var i =0;i<localIds.length;i++){
                        var html= '<li class="weui-uploader_file"><img class="preview" src=' + localIds[i] + '></li>';
                        $(html).appendTo($("#fileList"));
                    }
                    syncUpload(localIds);
                }
            });
        }

        function syncUpload(localIds) {
            var localId = localIds.pop();
            wx.uploadImage({
                localId: localId,
                isShowProgressTips: 1,
                success: function (res) {
                    var serverId = res.serverId;
                    evaluateFiles = evaluateFiles + res.serverId + ",";
                    $("#evaluateFiles").val(evaluateFiles);
                    if(localIds.length > 0){
                        syncUpload(localIds);
                    }
                }
            });
        };
</script>
<script>
    $(function () {
        $("#appliedTotalPrice").val("");
        $("#submitBtn").click(function () {
            // 期望金额
            var appliedTotalPrice = $("#appliedTotalPrice").val().trim();
            if (!appliedTotalPrice) {
                helpMessage("期望押品评估总价未填写");
                return;
            }
            if (appliedTotalPrice <= 0) {
                helpMessage("期望押品评估总价必须大于零");
                return;
            }
            if (!(/^-?[1-9]\d*$/.test(appliedTotalPrice))) {
                helpMessage("期望押品评估总价必须为整数");
                return;
            }

            // 押品特殊因素
            var reasonOfPriceAdjustment = $("#reasonOfPriceAdjustment").val().trim();
            if (!reasonOfPriceAdjustment) {
                helpMessage("押品特殊因素未填写");
                return;
            }

            var evaluateFiles = $("#evaluateFiles").val();
            var accessToken = $("#accessToken").val();
            if (evaluateFiles) {
                $('#submitBtn').addClass("btn_disabled").attr('disabled', 'disabled');
                $.ajax({
                    type: "POST",
                    url:  "/wechatOpportunity/wxGetEvaluateImgServerId",
                    data: {
                        evaluateFiles: evaluateFiles,
                        accessToken: accessToken
                    },
                    beforeSend:function() {
                        $(".helpMsg").text("正在上传反馈信息，请稍候").fadeIn(200);
                    },
                    success: function (data) {
                        if (data.status == "success") {
                            var fileNames = data.fileNameList
                            $("#fileNames").val(fileNames);
                            $("#suggestForm").submit();
                        } else {
                            helpMessage(data.errorMsg);
                            return;
                        }
                    }
                });
            } else {
                $('#submitBtn').addClass("btn_disabled").attr('disabled', 'disabled');
                $("#suggestForm").submit();
            }
        });

        setTimeout(function () {
            $(".message").fadeOut(200);
        }, 2000);

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }
    });
</script>
</body>
</html>
